<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<!--默认情况下, 内部的事件也会触发外部, 事件冒泡机制, 使用@事件名.stop终止事件冒泡-->
		<div style="width: 200px; height: 200px; background-color: red" @click="test1">
			<div style="width: 100px;height: 100px;background-color: blue" @click.stop="test2"></div>
		</div>

		<a href="www.baidu.com" @click.prevent="test3">测试</a>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			methods: {
				test1: function() {
					alert('out');
				},
				test2: function() {
					alert('inner');
				},
				test3: function() {
					alert('test3');
				}
			}
		});
	</script>
</body>
</html>